<template>
  <div>
     <div>

      <!-- 轮播图 -->
          <div>
            <van-swipe :autoplay="3000" >
                <van-swipe-item v-for="(image, index) in images" :key="index">
                   <router-link :to="'/showFilms/'+ image.id"> <img v-lazy="image.image_url"  class="swipe_imgs"/></router-link>
                </van-swipe-item>
            </van-swipe>
          </div>
     
          <!-- 推荐 -->
          <div  style="margin-top: 5px;">
            <div>
              <van-tag mark type="primary" size="medium">推荐</van-tag>
              <router-link to="/showMore/19">
                <van-tag style="float: right;" type="success" size="medium">查看更多</van-tag>      
              </router-link>          
          </div>
            <div>
                <van-grid :border="false" :column-num="3" class="film_imgs" >
                    <van-grid-item v-for="(film,index) in tuijian" :key="index" class="van-grid-item__content">
                      <router-link :to="'/showFilms/' + film.id">
                        <van-image :src="film.image_url" />
                        <div> {{film.title}} </div>
                      </router-link>
                    </van-grid-item>
                  </van-grid>
            </div>
            
          </div>

          <!-- 科幻 -->
          <div  style="margin-top: 5px;">
            <div>
              <van-tag mark type="primary" size="medium">科幻</van-tag>
              <router-link to="/showMore/5">
                <van-tag style="float: right;" type="success" size="medium">查看更多</van-tag>      
              </router-link>          
          </div>
            <div>
                <van-grid :border="false" :column-num="3" class="film_imgs" >
                    <van-grid-item v-for="(film,index) in kehuan" :key="index" class="van-grid-item__content">
                      <router-link :to="'/showFilms/' + film.id">
                        <van-image :src="film.image_url" />
                        <div> {{film.title}} </div>
                      </router-link>
                    </van-grid-item>
                  </van-grid>
            </div>
            
          </div>
            
          <!-- 爱情 -->
          <div  style="margin-top: 5px;">
            <div>
              <van-tag mark type="primary" size="medium">爱情</van-tag>
              <router-link to="/showMore/2">
                <van-tag style="float: right;" type="success" size="medium">查看更多</van-tag>      
              </router-link>          
          </div>
            <div>
                <van-grid :border="false" :column-num="3" class="film_imgs" >
                    <van-grid-item v-for="(film,index) in love" :key="index" class="van-grid-item__content">
                      <router-link :to="'/showFilms/' + film.id">
                        <van-image :src="film.image_url" />
                        <div> {{film.title}} </div>
                      </router-link>
                    </van-grid-item>
                  </van-grid>
            </div>
            
          </div>

          <!-- 动画 -->
          <div  style="margin-top: 5px;">
            <div>
              <van-tag mark type="primary" size="medium">动画</van-tag>
              <router-link to="/showMore/18">
                <van-tag style="float: right;" type="success" size="medium">查看更多</van-tag>      
              </router-link>          
          </div>
            <div>
                <van-grid :border="false" :column-num="3" class="film_imgs" >
                    <van-grid-item v-for="(film,index) in animation" :key="index" class="van-grid-item__content">
                      <router-link :to="'/showFilms/' + film.id">
                        <van-image :src="film.image_url" />
                        <div> {{film.title}} </div>
                      </router-link>
                    </van-grid-item>
                  </van-grid>
            </div>
            
          </div>

          <!-- 其他 -->
          <div  style="margin-top: 5px;">
            <div>
              <van-tag mark type="primary" size="medium">其他</van-tag>
              <router-link to="/showMore/12">
                <van-tag style="float: right;" type="success" size="medium">查看更多</van-tag>      
              </router-link>          
          </div>
            <div>
                <van-grid :border="false" :column-num="3" class="film_imgs" >
                    <van-grid-item v-for="(film,index) in others" :key="index" class="van-grid-item__content">
                      <router-link :to="'/showFilms/' + film.id">
                        <van-image :src="film.image_url" />
                        <div> {{film.title}} </div>
                      </router-link>
                    </van-grid-item>
                  </van-grid>
            </div>
            
          </div>
       
     </div>
   
  </div>
</template>

<script>
export default {
  name: 'AllFilms',
  data () {
   return {
    alltypes:[
      "全部","推荐", "科幻","剧情", "喜剧","爱情", "战争","冒险"
    ],
    tuijian:[],//推荐视频列表
    kehuan:[],//推荐视频列表
    love:[],//推荐视频列表
    animation:[],//推荐视频列表
    others:[],//推荐视频列表
    getPage:'', //随机生成的第几页
    images: [   
      {id:'16786',image_url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4039023843,688202250&fm=26&gp=0.jpg'},
      {id:'13954',image_url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=296702356,1523382013&fm=26&gp=0.jpg'},
      {id:'9764',image_url:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2992213156,269659148&fm=26&gp=0.jpg'},
      {id:'17124',image_url:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1844652613,622910768&fm=26&gp=0.jpg'},
        
        // 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=272875664,357952493&fm=26&gp=0.jpg',
        // 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4039023843,688202250&fm=26&gp=0.jpg',
        // 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3102524698,2680784294&fm=26&gp=0.jpg',
      ],
   
   }
  },
  mounted() {
    this.getRandomInt(1,100); //随机生成第几页
    this.initCommend(); //获取推荐视频
    this.initKeHuan();  //获取科幻视频
    this.initLove();    //获取爱情视频
    this.initAnimation();   //获取动画视频
    this.initOthers();   //获取其他视频
  

  },
  methods:{
    // 生成随机数
    getRandomInt(min, max) {
        // 以下函数返回 min（包含）～ max（包含）之间的数字：
       this.getPage = Math.floor(Math.random() * (max - min + 1)) + min
      
    },
    //获取推荐视频
    initCommend(){
      const _this = this
      this.axios.get("/reqq/type/findById?typeId=19&page="+ this.getPage +"&size=6").then(resp=>{
        console.log(resp)
         _this.tuijian = resp.data.data.result
      })
    },
    //获取科幻视频
    initKeHuan(){
      const _this = this
      this.axios.get("/reqq/type/findById?typeId=5&page="+ this.getPage +"&size=6").then(resp=>{
        console.log(resp)
         _this.kehuan = resp.data.data.result
      })
    },
    //获取爱情视频
    initLove(){
      const _this = this
      this.axios.get("/reqq/type/findById?typeId=2&page="+ this.getPage +"&size=6").then(resp=>{
        console.log(resp)
         _this.love = resp.data.data.result
      })
    },
    //获取动画视频
    initAnimation(){
      const _this = this
      this.axios.get("/reqq/type/findById?typeId=18&page="+ this.getPage +"&size=6").then(resp=>{
        console.log(resp)
         _this.animation = resp.data.data.result
      })
    },
    //获取其他视频
    initOthers(){
      const _this = this
      this.axios.get("/reqq/type/findById?typeId=19&page="+ this.getPage +"&size=6").then(resp=>{
        console.log(resp)
         _this.others = resp.data.data.result
      })
    },
   

  }
}
</script>

<style scoped>
  /* 字体 */
  .film_imgs .van-grid-item div{
    font-size: 12px;
    text-align: center;
    color: #F6F1E0;
    height: 25px;
   
  }
  /* 图片 */
     .film_imgs .van-grid-item .van-image{
      width: 94%;
      height: 160px;
        
    }
      /* 卡片 */
   /deep/ .van-image__img  {
       border-radius: 5px;
    }
    /* 卡片背景 */
    /deep/ .van-grid-item__content {    
      /* background-color: #eee; */
      background-color: #16161A;
      padding: 3px 1px;
      text-align: center;
    }

    /* 轮播图 */
    .swipe_imgs{
        width: 100%;
        height: 200px;
        /* border-radius: 10px; */
    }
</style>